<template>
  <div class="preview">
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="(item, index) in data" :key="index" :label="item.name" :name="item.name">
        <iframe class="preview-container iphone7" :src="item.url"></iframe>
        <canvas :id="item.name" style=""></canvas>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import QRCode from 'qrcode'
  const data = [{
    name: '商城',
    url: 'https://m2.yaolaivip.com'
  }, {
    name: '权益',
    url: 'https://m2.yaolaivip.com/profile'
  }, {
    name: '餐饮',
    url: 'https://m2.yaolaivip.com/restaurant'
  }, {
    name: '电影票',
    url: 'https://m2.yaolaivip.com/movie'
  }, {
    name: '贵接',
    url: 'https://m2.yaolaivip.com/reception'
  }]
  export default {
    name: 'index',
    components: {
    },
    data () {
      return {
        activeName: '商城',
        data: data
      }
    },
    mounted () {
      this.data.map((item) => {
        this.renderQR(item.name, item.url)
      })
    },
    methods: {
      renderQR (id, url) {
        var canvas = document.getElementById(id)
        QRCode.toCanvas(canvas, url, {margin: 2, scale: 6}, (error) => {
          if (error) console.error(error)
        })
      }
    }
  }
</script>
<style lang="less" scoped>
.preview {
  .preview-container {
    display: inline-block;
    border: 1px solid #ddd;
    &.iphone7 {
      width: 375px;
      height: 667px;
      margin-left: 300px;
    }
  }
}
</style>